<template>
  <view class="top-notice">
    <view>
      <top-nav-bar background-color="transparent" />
      <!--
      <view
        v-for="(item, index) in articleList"
        :key="index">
        <view class="public-title">
          {{ item.articleTitle }}
        </view>
        <view class="public-desc">{{ item.articleDescription }}</view>
        <view
          v-if="item.articleImg"
          style="width: 100%; border-radius: 30rpx; overflow: hidden; margin-bottom: 26rpx">
          <image
            :src="item.articleImg"
            lazy-load
            mode="widthFix"
            style="width: 100%; height: 100%">
          </image>
        </view>
        <view v-html="item.articleDetails"></view>
      </view> -->

      <view class="public-title">
        {{ $t('nav.title2') }}
      </view>
      <view class="top-img">
        <image
          src="/static/mask-group.png"
          mode="aspectFill"
          style="width: 100%; height: 100%"></image>
        <text class="des">{{ $t('notice.title') }}</text>
      </view>
      <view class="cark-box">
        <view
          v-for="item in articleList"
          :key="item.articleTitle"
          class="cark-item"
          @click="onGo(item)">
          <view class="top-title">
            <view class="name">{{ item.articleTitle }}</view>
            <uni-icons
              type="forward"
              color="#333333"
              size="16"></uni-icons>
          </view>
          <view v-if="item.addTime" class="time"> {{ item.addTime.split(' ')[0] }}</view>
        </view>
      </view>
    </view>
    <foot-page />
  </view>
</template>

<script setup>
  import { useArticle } from '@/hooks'

  const { articleList } = useArticle('Service_Introduction')

  const onGo = (item) => {
    uni.navigateTo({
      url: `/pages/details-index/details-index?articleId=${item.articleId}`
    })
  }
</script>

<style lang="scss" scoped>
  .top-notice {
    background: url('/static/bg/bg-top.png') no-repeat top center;
    background-size: 100%;
  }
  .public-title {
    padding: 40rpx 32rpx;
  }
  .top-img {
    height: 334rpx;
    position: relative;

    image {
      width: 100%;
      height: 100%;
    }

    .des {
      position: absolute;
      // top: 264rpx;
      bottom: 38rpx;
      left: 48rpx;
      width: 448rpx;
      height: 88rpx;

      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #ffffff;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
  .cark-box {
    padding: 0 32rpx;
    .cark-item + .cark-item {
      border-top: 2rpx solid #e2ecf8;
    }
    .cark-item {
      padding: 26rpx 0;
      .top-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10rpx;
        .name {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
      .time {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #999999;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }
  }
</style>
